<template>
  <div id="mine-message">
    <ul>
      <router-link
        tag="li"
        v-for="(item, index) in items"
        :key="index"
        :to="'/mine/mine-message-list?type=' + item.type">
        <span>
          <i v-if="item.num !== '0'"></i>
        </span>
        {{ item.name }}
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'mine-message',
    data() {
      return {
        items: [],
      }
    },
    created() {
      this.$http.post({
        api: this.$api.USER_MESSAGE,
        params: {
          user_id: localStorage.getItem('id')
        },
        success: (res) => {
          this.items = res.data.data;
        }
      })
    }
  }
</script>

<style scoped lang="scss">

  #mine-message {
    >ul {
      background: $white;
      margin-top: 1rem;

      >li {
        display: flex;
        align-items: center;
        height: 6rem;
        padding-left: 1rem;
        font-size: 1.4rem;
        color: #333;
        border-bottom: 1px solid #f5f5f5;

        >span {
          position: relative;
          display: inline-block;
          width: 40px;
          height: 40px;
          margin-right: .8rem;
          border-radius: 8px;

          >i {
            position: absolute;
            right: -2px;
            top: -2px;
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #f00200;
          }
        }

        &:nth-of-type(1) > span {
          background: #9552f4 url("../../assets/images/mine/icon-message.png") no-repeat center 9px / 18px auto;
        }

        &:nth-of-type(2) > span {
          background: #5196f4 url("../../assets/images/mine/icon-message.png") no-repeat center -105px / 18px auto;
        }

        &:nth-of-type(3) > span {
          background: #f58050 url("../../assets/images/mine/icon-message.png") no-repeat center -219px / 18px auto;
        }
      }
    }
  }
</style>
